<template>
  <div>
    <!-- <el-form ref="registerForm" :rules="registerRules" :model="registerForm" status-icon class= "register_form" label-width="80px">

    <el-form-item label="用户名" prop="username">
      <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="registerForm.checkPass" placeholder="请确认密码" show-password></el-input>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>

    <el-form-item class="btns">
      <el-button type="primary" @click="userRegister('registerForm')">注册</el-button>
      <el-button @click="resetForm('RegisterForm')">重置</el-button>
    </el-form-item>
    <router-link to='/login'>已有账号，去登陆</router-link>
  </el-form> -->

    <div class="register_container">
      <div class="register_box">
        <el-form ref="registerForm" :rules="registerRules" :model="registerForm" status-icon class="register_form" label-width="80px">

          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="registerForm.checkPass" placeholder="请确认密码" show-password></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <el-form-item class="btns">
            <el-button type="primary" @click="userRegister('registerForm')">注册</el-button>
            <el-button @click="resetForm('RegisterForm')">重置</el-button>
          </el-form-item>
          <router-link to='/login'>已有账号，去登陆</router-link>
        </el-form>
    </div>
    </div>
  </div>
  <!-- <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <el-form ref="userForm" :model="params">

        <el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]">
          <div>
            <el-input type="text" placeholder="你的昵称" v-model="params.nickname"/>
            <i class="iconfont icon-user"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
          <div>
            <el-input type="text" placeholder="手机号" v-model="params.mobile"/>
            <i class="iconfont icon-phone"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <div style="width: 100%;display: block;float: left;position: relative">
            <el-input type="text" placeholder="验证码" v-model="params.code"/>
            <i class="iconfont icon-phone"/>
          </div>
          <div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
            <a href="javascript:" type="button" @click="getCodeFun()" :value="codeTest" style="border: none;background-color: none">{{codeTest}}</a>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="设置密码" v-model="params.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>

        <div class="btn">
          <input type="button" class="sign-up-button" value="注册" @click="submitRegister()">
        </div>
        <p class="sign-up-msg">
          点击 “注册” 即表示您同意并愿意遵守简书
          <br>
          <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
          和
          <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
        </p>
      </el-form>
     
    </div>
  </div> -->
</template>

<script>
import {doRegister} from '@/api/register'
  export default {
    name:'Register',
    data() {
      var checkUsername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空!'));
        } else {
           callback();
        }
       
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.registerForm.checkPass !== '') {
            this.$refs.registerForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {  
        // dialogFormVisible:false,
        registerForm: {
          username: '',
          password: '',
          checkPass: '' ,
          email:''       
        },
        registerRules: {
          username: [    
            { validator: checkUsername, trigger: 'blur' },  
            // { required: true, message:'请输入用户名',trigger: 'blur' },
            // {min:3,max:10,message:'长度在3-10个字符',trigger:'blur'}
          ],
          password: [
            // { required: true, message:'请输入密码',trigger: 'blur' },
            // {min:5,max:10,message:'长度在5-10个字符',trigger:'blur'},
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          // username: [
          //   { validator: checkAge, trigger: 'blur' }
          // ]
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      userRegister(registerForm) {
        this.$refs.registerForm.validate(async  valid => {
          if (valid) {
            // this.$http({
            //     method:"post",
            //     url:"http://localhost:9090/users/regist",
            //     headers: {
            //         "Content-Type": "multipart/form-data"
            //     },
            //     withCredentials:true,
            //     // data:formData
            // })
          // await this.$http.post("http://localhost:9090/user/regist",this.registerForm)
          await doRegister(this.registerForm.username,this.registerForm.password,this.registerForm.email)
            .then((res)=>{
              console.log(res)
              if(res.data&&res.data.code==200){
                console.log(res.data);
                //提示注册成功
                this.$message.success('注册成功')
                // alert('注册成功！');
                //跳转登录页面
                this.$router.push({path:'/login'});
              }else{
                this.$message.success(response.data.data)
              }
            })
            .catch(error=>{
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(registerForm) {
          this.$refs.registerForm.resetFields();
      } 
    }  
  }
</script>
<style scoped>
  /* body{
    background-color: #2b4b6b;
  } */
   /* .register_container{
    background-color: #2b4b6b;
    height: 100%;
  } */
  .register_box{
    width: 450px;
    height: 500px;
    background-color: rgb(230, 219, 219);
    border-radius: 10px;
    position: relative;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    margin-top:300px;
    /* background-color: skyblue; */
  }
  .btns {
     /* //弹性布局 */
    display: flex;
    /* // 尾部对齐 */
    justify-content: flex-end; 
  }
  .register_form {
    position: absolute;
    top:50%;
    left:50%;
    /* 居中对齐 */
    transform: translate(-50%,-50%);
    /* height: 100%; */
    width: 100%;
    padding: 0px 20px;
    /* padding-top:20px; */
    background-color: rgb(230, 219, 219);
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    
  }

</style>